<template>
  <div class="login">
    <br>
    <br>
    <h1 class="h1">登录</h1>
    <br>
    <br>
    <label class="label">用户名</label>
    <input type="text" class="txt_input" v-model="userCode" />
    <br>
    <label class="label">密码</label>
    <input type="password" class="txt_input" v-model="password"/>
    <br>
    <label class="label">验证码</label>
    <div class="captcha" @click="ramdom++"><img :src="captchaUrl"/></div>
    <input type="text" class="txt_input" v-model="captcha"/>
    <button class="button" @click="submit">登录</button>
    <br>
    <button class="button reg_btn" @click="$router.push('/register')">前往注册</button>
    <br><br>
    <div class="msg">{{msg}}</div>
  </div>
</template>

<script>
  import ltxService from '../services/LtxService'
    export default {
        name: "Login",
      data(){
          return {
            userCode:"",
            password:"",
            msg:"",
            ramdom:1,
            captchaBaseUrl:"http://localhost:8080/api/getCaptcha/",
            captcha:""
          }
      },
      computed:{
        captchaUrl:function () {
          let app=this;
          app.ramdom+=1;
          return app.captchaBaseUrl+app.ramdom;
        }
      },
      methods:{
          submit:function () {
            let app=this;
            if(!app.userCode.length>0){
              app.msg="请填写用户名";
              return false;
            }
            if(!app.password.length>0){
              app.msg="请填写密码";
              return false;
            }
            if(!app.captcha.length>0){
              app.msg="请填写验证码";
              return false;
            }


           ltxService.login(this.userCode,this.password,this.captcha).then(function (response) {
                switch (response.data.stateCode) {
                  case "PASS_ERR":
                    app.msg="用户名或密码错误";
                    break;
                  case "CAPTCHA_ERR":
                    app.msg="验证码错误";
                    break;
                  case "OK":

                    app.$store.commit("setUser",response.data.data)

                    app.$router.push("/");
                    break;
                }
              })
              .catch(function (error) {
              });
          }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/base";

  .login{
    background-color:$bg;
    width: 100%;
    height: 100vh;
    .captcha{
      width: 100px;
      height: 50px;
      margin: 20px auto;
    }
    .msg{
      text-align: center;
      color: $main;
    }

  }

  .reg_btn{

    background-color: $sub;
  }
</style>
